<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的方法</title>
</head>
<body>
   <script>
        //  # concat()  用于合并两个或多个数组，返回一个新数组
        // ! 方法1
        const arr1 = ['a','b','c','d']
        const arr2 = ['e','f','g']
        const arr3 = arr1.concat(arr2)
        console.log(arr3)
        // ! 方法2
        console.log([...arr1,...arr2])

        // # reverse() 将一个数组就地翻转
        const array4 = ['one','two','three']
        const newArray4 = array4.reverse()
        console.log(newArray4)  //['three', 'two', 'one']
        
        
        // # every() 测试一个数组内的所有元素是否都能通过指定函数的测试，返回一个布尔值
        const arr4 = ['10','20','30','40','50']
        const arr5 = arr4.every(item=>item >=10)
        const arr6 = arr4.every(item=>item >=20)
        console.log(arr5)  // true
        console.log(arr6)  //false

        // # some() 测试数组中是否至少有一个元素满足条件，只要有一个满足就返回true,否则返回false
        console.log(arr4.some(item =>item >=20))  //true
        console.log(arr4.some(item=> item < 10))  //false

        // # find() 返回数组中满足条件的第一个元素的值,如果没有则返回undefind
        console.log(arr4.find(item => item >15))  //20
        console.log(arr4.find(item => item >60))  //undefind

        // # findIndex() 返回数组中满足条件的第一个元素的索引，若没有找到对应元素则返回-1
        console.log(arr4.findIndex(item=> item >=10)) // 0
        console.log(arr4.findIndex(item=>item > 60))   // -1


        // ! 数组新增元素
        // # push() 将指定元素添加到数组的末尾，并返回新的数组长度
        const color = ['red','green','blue']
        const newColor = color.push('yellow')
        console.log(color)     //['red', 'green', 'blue', 'yellow']
        console.log(newColor)  // 4

        // # unshift() 将指定元素添加到数组的开头，并返回数组的新长度
        const color2 =  ['red','green','blue']
        const newColor2 = color2.unshift('yellow')
        console.log(color2)    //['yellow', 'red', 'green', 'blue']
        console.log(newColor2) // 4

        // # splice() 将指定元素添加到数组的任意位置  数组名.splice(从第几个开始删，删几个，添加数据1,添加数据2....)
        const color3 = ['red','green','blue']
        const newColor3 = color3.splice(0,0,'yellow')
        console.log(color3)   // ['yellow', 'red', 'green', 'blue']
         

        // ! 数组删除元素
        // # pop() 从数组中删除最后一个元素，并返回该元素的值
        const color4 = ['red','green','blue'] 
        const newColor4 = color4.pop()
        console.log(color4)  //['red', 'green']
        console.log(newColor4)  // blue

        // # shift() 从数组中删除第一个元素，并返回该元素的值
        const color5 = ['red','green','blue'] 
        const newColor5 = color5.shift()
        console.log(color5)  // ['green', 'blue']
        console.log(newColor5)  // red

        // #splice() 从数组中指定元素删除
        const fruits =['西瓜','苹果','鸭梨','香蕉','葡萄','榴莲']
        const newFruits = fruits.splice(2,1)
        console.log(fruits)     // ['西瓜', '苹果', '香蕉', '葡萄', '榴莲']
        console.log(newFruits)  //['鸭梨']

        // ! 数组遍历
        // # forEach() 遍历数组
        const array1 = ['a','b','c']
        array1.forEach(element => console.log(element))  // a b c

        // # map() 遍历数组，得到一个新数组
        const array2 = [1,2,3,4,5]
        const newArray2 = array2.map(item => item *2)
        console.log(newArray2)  //[2, 4, 6, 8, 10]

        // #includes() 判断一个数组是否包含一个指定的值，包含返回true,不包含返回false
        const array3 = [1,2,3,6]
        console.log(array3.includes(3))  //true
        console.log(array3.includes(5))  //false
        
        // # indexOf() 返回数组中第一次出现给定元素的下标，如果不存在则返回-1
        const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']
        console.log(beasts.indexOf('bison'))   //1
        console.log(beasts.indexOf('giraffe')) //-1

        // # join() 将一个数组的所有元素连接成一个字符串，并返回这个字符串
        const color6 = ['red','green','blue','yellow']
        console.log(color6.join())   //red,green,blue,yellow
        console.log(color6.join('')) //redgreenblueyellow
        console.log(color6.join('-')) //red-green-blue-yellow
        
        // # filter() 筛选数组，得到一个筛选过后的新数组
        const number = [1,2,3,4,5,6,7,8]
        const newNumber = number.filter(item => item > 4)
        console.log(newNumber) //[5, 6, 7, 8]
        

        // # reduce() 对数组中的每一个元素按序列执行一个提供的reducer函数，每一次运行reducer会将先前元素计算结果作为参数传入，最后返回计算结果
        const num = [1,2,3,4,5,6,7]
        const total1 = num.reduce((prev,item) =>prev + item)
        console.log(total1) //28
        const total2 = num.reduce((prev,item) =>prev + item,10)
        console.log(total2) //38
   </script>
    
</body>
</html>